<template>
	<view class="">
		<u-navbar title="收款账户" isFixed :background="colorObj">
			<!-- <template #right>
				<u-icon @click="show = true" class="u-m-r-15" color="#FFF" name='edit-pen-fill'></u-icon>
			</template> -->
		</u-navbar>
		<!-- <u-cell-group>
			<u-cell-item @click="update" :icon-style="iconSty" icon="setting-fill" title="修改认证信息"></u-cell-item>
		</u-cell-group -->

		<view class="u-p-l-24 u-p-r-24 u-p-t-24">
			<u-button @click="show = true" height="100" type="success" ripple><u-icon name="edit-pen-fill"
					size="36"></u-icon> <text class="u-font-sm u-m-l-6">快速填写</text></u-button>
		</view>

		<u-popup mode="bottom" v-model="show">
			<!-- <u-cell-group>
				<u-field label="" placeholder="请输入手机号" type="number">

				</u-field>
				<u-field placeholder="确认验证码">
					<template #right>
						<u-button size="mini" type="success">发送验证码</u-button>
					</template>
				</u-field>
				<u-button type="warning">获取信息</u-button>
			</u-cell-group>	 -->
			<view class="u-p-14">
				<u-form :model="formCode">
					<u-form-item>
						<u-input type="number" v-model="formCode.mobile" placeholder="请输入手机号"></u-input>
					</u-form-item>
					<u-form-item>
						<u-input type="number" v-model="formCode.code" placeholder="请输入验证码"></u-input>
						<template #right>
							<u-button size="mini" type="success" @click="getCode">{{tips}}</u-button>
						</template>
					</u-form-item>
					<u-form-item>
						<u-button type="warning" @click="getphoneInfo">查询信息</u-button>
					</u-form-item>
				</u-form>
			</view>

		</u-popup>

		<view>

		</view>

		<view class="u-m-t-14 bg-white u-p-l-26 u-p-r-26">
			<u-form ref="formEl" :model="form" labelWidth="auto" input-align="">


				<!-- <u-form-item label="姓名" prop="fullName">
					<u-input inputAlign="right" type="" v-model="form.fullName" placeholder="请输入"></u-input>
				</u-form-item> -->

				<u-form-item label="企业名称" prop="businessName" v-show="form.userType!=3">
					<u-input inputAlign="right" v-model="form.businessName" placeholder="请输入企业名称"></u-input>
				</u-form-item>
				<u-form-item label="企业联系人名称" prop="linkName" v-show="form.userType!=3">
					<u-input inputAlign="right" v-model="form.linkName" placeholder="请输入企业联系人名称"></u-input>
				</u-form-item>
				<u-form-item label="企业联系人电话" prop="linkName" v-show="form.userType!=3">
					<u-input inputAlign="right" v-model="form.linkPhone" placeholder="请输入企业联系人电话"></u-input>
				</u-form-item>

				<u-form-item :label="strAdd('姓名')" prop="fullName">
					<u-input inputAlign="right" type="" v-model="form.fullName" placeholder="请输入"></u-input>
				</u-form-item>
				<u-form-item :label="strAdd('身份证号')" prop="idCard">
					<u-input inputAlign="right" v-model="form.idCard" placeholder="请输入身份证号"></u-input>
				</u-form-item>

				<u-form-item :label="strAdd('手机号')" prop="phone">
					<u-input inputAlign="right" :disabled="form.ymAccountId?true:false" type="number" v-model="form.phone" placeholder="请输入"></u-input>
				</u-form-item>
				<u-form-item label="银行卡类型" v-show="form.userType!=3">
					<template #right>
						<u-button class="u-m-l-12" @click="form.cardType = item.value"
							:type="item.value==form.cardType?'success':'default'" size="mini"
							v-for="(item,index) in cardTypeList" :key="index">{{item.name}}</u-button>
					</template>
				</u-form-item>
				<u-form-item label="银行" prop="bankName">
					<u-input inputAlign="right" type="select" @click="showBank = true" v-model="form.bankName"
						placeholder="请选择"></u-input>
				</u-form-item>
				<u-form-item label="银行支行" prop="branchName">
					<u-input inputAlign="right" type="select" @click="showBRcanch = true" v-model="form.branchName"
						placeholder="请选择"></u-input>
				</u-form-item>
				<u-form-item :label="labelText" prop="cardName" v-show="form.userType ==3">
					<u-input inputAlign="right" v-model="form.cardName" placeholder="请输入"></u-input>
				</u-form-item>
				<u-form-item label="银行卡号" prop="cardNo">
					<u-input inputAlign="right" v-model="form.cardNo" placeholder="请输入"></u-input>
				</u-form-item>

				<u-row gutter="16" v-show="form.cardType==2">
					<u-col span="6">
						<u-form-item class="uploadItem" label-position="top" label="银行卡正面" prop="bankCardFront">
							<u-upload index="bankCardFront" :file-list="bankCardFrontFileList" :custom-btn="true" :auto-upload="false" :max-count='1'
								@on-list-change="onSuccess">
								<template #addBtn>
									<image style="opacity: .4;" mode="widthFix" class="addImg"
										src="@/static/images/my/bankface.png">
									</image>
								</template>
							</u-upload>
						</u-form-item>
					</u-col>
					<u-col span="6">
						<u-form-item class="uploadItem" label-position="top" label="银行卡背面" prop="bankCardBack">
							<u-upload index="bankCardBack" :file-list="bankCardBackFileList" :custom-btn="true" :auto-upload="false" :max-count='1'
								@on-list-change="onSuccess">
								<template #addBtn>
									<image style="opacity: .4;" mode="widthFix" class="addImg"
										src="@/static/images/my/banback.png">
									</image>
								</template>
							</u-upload>
						</u-form-item>
					</u-col>
				</u-row>


				<u-row gutter="16" v-show="form.cardType==2">
					<u-col span="6">
						<u-form-item class="uploadItem" label-position="top" label="身份证正面" prop="idCardFront">
							<u-upload index="idCardFront" :file-list="idCardFrontFileList" :custom-btn="true" :auto-upload="false" :max-count='1'
								@on-list-change="onSuccess">
								<template #addBtn>
									<image style="opacity: .4;" mode="widthFix" class="addImg"
										src="@/static/images/my/idCardFace.png">
									</image>
								</template>
							</u-upload>
						</u-form-item>
					</u-col>
					<u-col span="6">
						<u-form-item class="uploadItem" label-position="top" label="身份证反面" prop="idCardBack">
							<u-upload index="idCardBack" :file-list="idCardBackFileList" :custom-btn="true" :auto-upload="false" :max-count='1'
								@on-list-change="onSuccess">
								<template #addBtn>
									<image style="opacity: .4;" mode="widthFix" class="addImg"
										src="@/static/images/my/idCardBack.png">
									</image>
								</template>
							</u-upload>
						</u-form-item>
					</u-col>
				</u-row>

				<u-row gutter="16" v-if="form.userType!=3">
					<u-col span="6">
						<u-form-item class="uploadItem" label-position="top" label="营业执照" prop="businessLicense">
							<u-upload index="businessLicense" :file-list="busineFileList" :custom-btn="true" :auto-upload="false" :max-count='1'
								@on-list-change="onSuccess">
								<template #addBtn>
									<image style="opacity: .4;" mode="widthFix" class="addImg"
										src="@/static/images/my/busname.png">
									</image>
								</template>
							</u-upload>
						</u-form-item>
					</u-col>
				</u-row>

			</u-form>
		</view>
	</view>



	<view class="u-m-t-46 u-p-l-16 u-p-r-16">
		<u-button type="warning" @click="submit">确定</u-button>
	</view>

	<view class="u-p-80"></view>

	<!-- 银行选择 -->
	<BankSelect @select="selectFn" v-model="showBank" type='1' />

	<!-- 银行支行选择 -->
	<BankSelect @select="selectFn" type='2' v-model:Fomr2="brcanchForm" v-model:modelValue="showBRcanch" />

	<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
</template>

<script lang="ts" setup>
	import userApi from '@/api/user'
	import { onShow, onReady, onLoad } from '@dcloudio/uni-app'
	import { computed, reactive, ref } from "vue";
	import BankSelect from '@/components/BankSelect/BankSelect.vue'
	const busineFileList = ref([])
	const idCardFrontFileList = ref([])
	const idCardBackFileList = ref([])
	const bankCardFrontFileList = ref([])
	const bankCardBackFileList = ref([])
	onLoad((e) => {
		form.value.userType = e.type
		if (e.update) {
			getDates()
		}
	})

	function getDates() {
		userApi.accountInfoItem({ userType: form.value.userType }).then(res => {
			Object.assign(form.value, res.data)
			const {businessLicense,idCardFront,idCardBack,bankCardBack,bankCardFront} = res.data
			busineFileList.value = businessLicense?[{url:businessLicense}]:[]
			idCardFrontFileList.value = idCardFront?[{url:idCardFront}]:[]
			idCardBackFileList.value = idCardBack?[{url:idCardBack}]:[]
			bankCardFrontFileList.value = bankCardFront?[{url:bankCardFront}]:[]
			bankCardBackFileList.value = bankCardBack?[{url:bankCardBack}]:[]
		})
	}

	function codeChange(text) {
		tips.value = text
	}

	const formCode = ref({
		mobile: '',
		smsType: 103,
		code: ''
	})

	function getphoneInfo() {
		uni.showLoading({
			title: '加载中...'
		})
		userApi.getDataByNameType(Object.assign(formCode.value, { phone: formCode.value.mobile, userType: form.value.userType })).then(res => {
			Object.assign(form.value, res.data)
			show.value = false
		}).finally(() => {
			uni.hideLoading()
		})

	}

	function getCode() {
		if (uCode.value.canGetCode) {
			uni.showLoading({
				title: '正在获取验证码'
			})
			userApi.msgSms(formCode.value).then(res => {
				uni.hideLoading();
				uni.$u.toast('验证码已发送');
				uCode.value.start();
			})
		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	}

	const uCode = ref(null)

	onShow(() => {
		// userApi.accinfo().then(res => {
		// 	userType.value = res.data.userType
		// })
	})

	onReady(() => {
		formEl.value.setRules(rules)
	})

	const iconSty = reactive({
		color: '#ffc300'
	})
	const colorObj = ref({ background: '#ffc300' })

	const objInfo = ref({

	})


	const tips = ref('')
	const seconds = ref(60)

	const form = ref({
		ymAccountId:"",
		userType: '',
		phone: '',
		linkName: '',
		linkPhone: '',
		cardType: 1,
		fullName: '',
		bankCode: '',//银行编号
		bankName: '',//银行名称
		branchCode: '',//支行编号
		branchName: '',//支行名称
		cardName: '',//企业名称，法人姓名，个人姓名
		cardNo: '',//银行卡号
		bankCardFront: '',//银行卡正面
		bankCardBack: '',//银行卡背面
		defaultFlag: 1,
		businessName: '',
		idCard: '',//身份证号
		idCardFront: '',
		idCardBack: '',
		businessLicense: '',//营业执照
	})

	const labelText = computed(() => {
		if (form.value.userType == 3) {
			return '持卡人姓名'
		} else {
			if (form.value.cardType == 1) {
				return '姓名'
			}
		}
	})
	const showBank = ref(false)
	const showBRcanch = ref(false)
	let brcanchForm = reactive({
		pageNo: 1,
		pageSize: 100,
		branchName: '',
		bankCode: '',
	})

	const show = ref(false)

	const userType = ref('')
	const formEl = ref(null)
	const rules = reactive({
		bankName: {
			required: true,
			message: '请选择银行',
			trigger: ['blur', 'change']
		},
		fullName: {
			required: true,
			message: '输入姓名',
			trigger: ['blur', 'change']
		},
		branchName: {
			required: true,
			message: '请选择支行',
			trigger: ['blur', 'change']
		},

		cardNo: {
			required: true,
			message: '请输入卡号',
			trigger: ['blur', 'change']
		},
		// bankCardFront: {
		// 	validator: (rule, value, callback) => {
		// 		if (form.value.cardType == 2) {
		// 			return !uni.$u.test.isEmpty(form.value.bankCardFront)
		// 		} else {
		// 			return true
		// 		}
		// 	},
		// 	message: '请上传银行卡正面照',
		// 	trigger: ['blur', 'change']
		// },
		// bankCardBack: {
		// 	validator: (rule, value, callback) => {
		// 		if (form.value.cardType == 2) {
		// 			return !uni.$u.test.isEmpty(form.value.bankCardBack)
		// 		} else {
		// 			return true
		// 		}
		// 	},
		// 	message: '请上传银行卡背面照',
		// 	trigger: ['blur', 'change']
		// },
		// idCardFront: {
		// 	validator: (rule, value, callback) => {
		// 		return !uni.$u.test.isEmpty(form.value.idCardFront)
		// 	},
		// 	message: '请上传身份证正面',
		// 	trigger: ['blur', 'change']
		// },
		// idCardBack: {
		// 	validator: (rule, value, callback) => {
		// 		return !uni.$u.test.isEmpty(form.value.idCardBack)
		// 	},
		// 	message: '请上传身份证反面',
		// 	trigger: ['blur', 'change']
		// },
		// businessLicense: {
		// 	validator: (rule, value, callback) => {
		// 		if (form.value.userType == 3) {
		// 			return true
		// 		} else {
		// 			return !uni.$u.test.isEmpty(form.value.businessLicense)
		// 		}
		// 	},
		// 	message: '请上传营业执照',
		// 	trigger: ['blur', 'change']
		// },
	})

	const cardTypeList = ref([
		{
			name: '对公账户',
			value: 1,
		},
		{
			name: '对私法人',
			value: 2,
		}
	])


	// 图片上传
	async function onSuccess(lists, name) {
		console.log(lists, name);
		if (lists.length > 0) {//上传
			switch (name) {
				case 'bankCardFront': //身份证正面
					form.value.bankCardFront = uni.getFileSystemManager().readFileSync(lists[0].url, 'base64')
					break;
				case 'bankCardBack': //身份证背面
					form.value.bankCardBack = uni.getFileSystemManager().readFileSync(lists[0].url, 'base64')
					break;
				case 'idCardFront': //身份证正面
					form.value.idCardFront = uni.getFileSystemManager().readFileSync(lists[0].url, 'base64')
					break;
				case 'idCardBack': //身份证背面
					form.value.idCardBack = uni.getFileSystemManager().readFileSync(lists[0].url, 'base64')
					break;
				case 'businessLicense': //营业执照
					form.value.businessLicense = uni.getFileSystemManager().readFileSync(lists[0].url, 'base64')
					break;

			}

		} else {//删除

		}
	}

	function strAdd(str) {
		if (form.value.userType == 3) {
			return str
		} else {
			return str + '(法人)'
		}
	}

	function selectFn(obj) {
		Object.assign(form.value, obj)
		Object.assign(brcanchForm, obj)
	}

	function update() {
		uni.$u.route({
			url: '/subpackage/my/fund/userAuth',
			params: {
				type: userType.value,
				update: true
			}
		})
	}

	function submit() {
		formEl.value.validate((vali) => {
			if (vali) {
				userApi.setYmAccount(Object.assign(form.value, objInfo.value,{cardName:form.value.fullName})).then(res => {
					uni.showToast({
						title: res.msg
					})
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.addImg {
		display: block;
		width: 315upx;
		height: 202upx;
	}
</style>
